import React,{Component} from 'react'
import {connect} from 'react-redux'

import {
    TopicWrapper,
    TopicItem
} from '../style'

class Topic extends Component{

    getTopList(){
        const {topicList} = this.props
        return topicList.map((item,index) => (
            <TopicItem key={item.get('id')}>
                <img className='top-pic'  src={item.get('url')} alt=""/>
                {item.get('title')}
            </TopicItem>
        ))
    }

    render(){
        return (
           <TopicWrapper>
               { this.getTopList()  }
           </TopicWrapper>
        )
    }
}

const mapState = (state) => {
    return {
        topicList:state.get('home').get('topicList')
    }
}

export default connect(mapState,null)(Topic)